<template>
  <el-row loading>
    <el-col :span="24">
       <truck-edit ref="truckEdit" :parentTruckType="parentTruckType" :parentFleet="parentFleet" v-on:save-finished="queryAll()"></truck-edit>
       <truck-detail ref="truckDetail" v-on:save-finished="queryAll()"></truck-detail>
      <el-row >
        <el-col :span="6">
          <el-select placeholder="请输入车辆类型" v-model="search.truckTypeId" style="width:100%">
            <el-option
            v-for="item in parentTruckType"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"></el-option>
          </el-select>
        </el-col>
        <el-col :span="6">
           <el-input placeholder="请输入车牌号码" size="small" v-model="search.licensePlate" style="width:100%">
          </el-input>
        </el-col>
        <el-col :span="6">
          <el-select placeholder="请输入车队名称" v-model="search.fleetId" style="width:100%">
            <el-option
              v-for="item in parentFleet"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"></el-option>
          </el-select>
        </el-col>
        <el-col :span="6">
          <el-button type="danger"  size="small" @click="queryAll()">搜索</el-button>
        </el-col>
        <el-col :span="24" style="text-align: right;">
          <el-button  icon="el-icon-plus" type="danger" @click="handleCreatetruck()" v-show="add">新增车辆</el-button>
        </el-col>
      </el-row>
      </el-col>
       <el-col :span="24">
          <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="id" label="车辆编号" header-align="center" width="120"></el-table-column>
            <el-table-column  label="车辆类型" header-align="center" width="120">
              <template slot-scope="scope">
                  <span v-for="item in parentTruckType"  v-if="item.id==scope.row.truckTypeId">{{item.name}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="licensePlate" label="车牌号码" header-align="center" width="120"></el-table-column>
            <el-table-column  label="所属车队" header-align="center" width="120">
              <template slot-scope="scope">
                  <span v-for="item in parentFleet"  v-if="item.id==scope.row.fleetId">{{item.name}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="deviceGpsId" label="GPS设备ID" header-align="center" align="center" width="120"></el-table-column>
            <el-table-column prop="allowableLoad" label="准载重量(千克)" header-align="center" align="center" width="120"></el-table-column>
            <el-table-column prop="allowableVolume" label="准载体积(方)" header-align="center" align="center" width="120"></el-table-column>
            <!-- <el-table-column prop="transportTripsId" label="车次编号" header-align="center" align="center" width="120"></el-table-column> -->
            <el-table-column label="操作" header-align="center" align="center" width="200">
              <template slot-scope="scope">
                <el-button v-show="detail" type="primary" size="mini"
                  @click="handleDetailtruck(scope.row)">查看详情</el-button>
                <el-button  type="danger" size="mini"
                  @click="handleDeletetruck(scope.row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-row>
        <el-col :span="24">
         <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="currentChange"
            :current-page.sync="search.page"
            :page-sizes="[2,4,6,8]"
            :page-size="search.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="counts">
          </el-pagination>
        </el-col>
      </el-row>
        </el-col>
</el-row>
</template>
<script>
import carApi from '@/api/car.js'
import TruckEdit from '@/components/truck/truckEdit'
import TruckDetail from '@/components/truck/truckDetail'
  export default {
    data() {
      return {
        add:true,
        detail:true,
        parentTruckType:[],
        parentFleet:[],
        tableData:[],
        loading: true,
        search:{
        truckTypeId:"",
        fleetId:"",
        licensePlate:"",
        pageSize:2,//每页显示的条数
        page:1,//第一页
        },
        pages:"",//总共几页
        counts:0 //共几条
      }
    },
    methods: {
      //查询所有车辆
      queryAll(){
        carApi.queryAll(this.search).then(res => {
          console.log(res)
          console.log(res.data)
          this.tableData=res.data.items
          this.counts=res.data.counts;
        })
        .catch(err => {
          console.error(err);
        })
      },
      //查询所有车辆类型
      findAllTruckType(){
        carApi.truckTypeQueryall("").then(res =>{
          this.parentTruckType=res.data
        })
      },
      //查询所有车队
      findAllFleet(){
        carApi.fleetQueryAll("").then(res =>{
          this.parentFleet=res.data
        })
      },
      currentChange(val){
        this.page=val;
        this.queryAll();
      },
      handleSizeChange(val) {
        this.pageSize=val;
        this.queryAll();
        },
      handleCreatetruck(){
        this.loading = true
        this.$refs.truckEdit.$emit('openAddTruckDialog')
        this.loading = false
      },
      handleDetailtruck(row) {
      this.loading = true
      console.log(row)
      carApi.queryByIdTruck(row.id),carApi.queryByIdTruckLicense(row.id).then(response => {
        console.log(response.data)
        this.$refs.truckDetail.$emit('openDetailTruckDialog',response.data)
        this.loading = false
      })
      .catch(error => {
        console.log(error)
      })
    },
    handleDeletetruck(id){
       this.$confirm('确定删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      .then(() => {
        carApi.del(id)
        .then(res => {
         console.log(res.data)
         if(res.data.msg=="success"){
            this.$message({
            message: '删除了一条记录',
            type: 'warning'
        })
        this.queryAll()
         }
        })
    })
 }
},
    created(){
        this.queryAll();
        this.findAllTruckType();
        this.findAllFleet();
    },
    components:{TruckEdit,TruckDetail},

  }

</script>
